<div *ngIf="isShowTool" style="border-bottom: 1px solid #e2e2e2;padding: 10px 0px 2px;">
    <a nz-button nzSize="small" *ngIf="isEditor" (click)="isEditor=false">
        <i nz-icon nzType="eye" nzTheme="outline"></i> {{l('Preview')}}
    </a>
    <a nz-button nzSize="small" *ngIf="!isEditor" (click)="isEditor=true">
        <i nz-icon nzType="edit" nzTheme="outline"></i> {{l('Edit')}}
    </a>
    <a nz-button nzSize="small" *ngIf="isEditor" (click)="reset()">
        <i nz-icon nzType="reload" nzTheme="outline"></i> {{l('Reset')}}
    </a>
    <ng-container *ngFor="let item of toolBtns">
        <a nz-button nzSize="small" (click)="item.click(formJson,$event)">
            {{item.text}}
        </a>
    </ng-container>
</div>
<div (click)="selectGroup($event)">
    <div *ngIf="formJson.groupName!='default'" class="group-name" style="border-bottom: 1px solid #ddd;padding-bottom: 5px;">
        <nz-tag [nzColor]="'#db2c0d'">{{l('group')}}</nz-tag>
        <span nz-typography nzSize="small" class="font-weight-bold" [(nzEditable)]="isEditor" [(nzContent)]="formJson.groupName"></span>
    </div>
    <ng-template #renderList let-item="item" let-i="idx">
        <ng-container>
            <ng-container *ngIf="item.isGroup">
                <div [ngClass]="(isEditor&&item.group.key===formJson.root.selectedGroupKey)?'group-wrap-select':'group-wrap'">
                    <div *ngIf="isEditor" nz-button nzShape="circle" nzSize="small" nzType="danger" nz-tooltip [nzTooltipTitle]="l('Delete the group')" style="float: right;margin-top: -5px;" (click)="this.formJson.removeItem(item.key)">
                        <i nz-icon nzType="delete" nzTheme="outline"></i>
                    </div>
                    <button *ngIf="isEditor&&!item.group.isImport" nz-nz-button style="float: right;margin-top: -6px;" (click)="saveforTemplete(item.group)">{{l('Save as template')}}</button>
                    <ng-container *ngIf="isEditor&&item.group.isImport">
                        <div>
                            <span nz-typography nzSize="small" class="font-weight-bold" [(nzEditable)]="isEditor" [(nzContent)]="item.group.groupName"></span>
                            <nz-form-item nz-row nzSize="small">
                                <nz-form-label nz-col [nzSm]="6" [nzXl]="4" [nzXs]="24" [nzXXl]="8" nzFor="patrolForm">
                                    {{l('ImportForm')}}
                                </nz-form-label>
                                <nz-form-control nz-col [nzSm]="18" [nzXl]="20" [nzXs]="24" [nzXXl]="16" nzHasFeedback>
                                    <!-- <nz-select style="width: 75%;" nzSize="small" nzAllowClear nzShowSearch [nzPlaceHolder]="l('Select')" name="patrolForm" [(ngModel)]="item.group.importOption.id">
                                        <nz-option nzCustomContent *ngFor="let item of formJsonList" [nzValue]="item.id" [nzLabel]="item.name">
                                            {{item.name}}<a style="margin-left: 10px;" nz-tooltip [nzTooltipTitle]="l('Preview')" (click)="previewForm(item,$event)">
                                                <i nz-icon nzType="eye" nzTheme="outline"></i>
                                            </a>
                                        </nz-option>
                                    </nz-select> -->
                                    <div>
                                        <span style="padding: 0 10px;">{{item.group.importOption.name}}</span>
                                        <span *ngIf="item.group.importOption.id">
                                            <a style="margin-left: 10px;" nz-tooltip [nzTooltipTitle]="l('Preview')" (click)="previewForm({id:item.group.importOption.id},$event)">
                                                <i nz-icon nzType="eye" nzTheme="outline"></i>
                                            </a>
                                        </span>
                                        <span>
                                            <a style="margin-left: 10px;" nz-tooltip [nzTooltipTitle]="l('Edit')" (click)="selectImportGroup(item.group.importOption)">
                                                <i nz-icon nzType="edit" nzTheme="outline"></i>
                                            </a>
                                        </span>
                                    </div>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item nz-row>
                                <nz-form-label nz-col [nzSm]="6" [nzXl]="4" [nzXs]="24" [nzXXl]="8" nzFor="patrolForm">
                                    {{l('ImportTitleNumber')}}
                                </nz-form-label>
                                <nz-form-control nz-col [nzSm]="18" [nzXl]="20" [nzXs]="24" [nzXXl]="16" nzHasFeedback>
                                    <input type="number" nz-input nzSize="small" style="width: 75%; margin-right: 10px;" [placeholder]="l('ImportTitleNumber 0OrNotFillShowAll')" [(ngModel)]="item.group.importOption.number" />
                                </nz-form-control>
                            </nz-form-item>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="!isEditor||!item.group.isImport">
                        <app-custom-form-editor-group [index]="index" [(precondition)]="item.precondition" [isPreview]="isPreview" [(formJson)]="item.group" [isReadOnly]="isReadOnly" [(isEditor)]="isEditor"></app-custom-form-editor-group>
                    </ng-container>
                </div>
            </ng-container>
            <ng-container *ngIf="!item.isGroup">
                <div (click)="formJson.setSelected(item.item)" [ngClass]="(isEditor&&item.item.key===formJson.root.selectedItemKey&&item.item.type!=='blank')?'item-wrap-select':'item-wrap'">
                    <app-custom-form-editor-item [listItem]="item" [isPreview]="isPreview" [(formJson)]="formJson" [groupIndex]="index" [isReadOnly]="isReadOnly" [(isEditor)]="isEditor" (getItemChange)="SaveAsTitle($event)" [(item)]="item.item"></app-custom-form-editor-item>
                </div>
            </ng-container>
            <div *ngIf="i<formJson.itemList.length-1" class="hr"></div>
            <ng-container *ngFor="let li of item.precondition">
                <ng-container *ngIf="li.isShow()||isEditor">
                    <div *ngFor="let ques of li.children;let idx = index" style="border-radius: 6px;margin-top: 5px;" [ngStyle]="isEditor?{borderLeft:'1px dotted #ffa500',marginLeft:'2px'}:{}">
                        <span *ngIf="isEditor" style="margin-left: 10px;">当条件满足时显示 条件：“<span style="cursor: pointer;" (click)="scrollIntoItemByKey(index+'_'+item.key)" class="span-link">{{li.sourceItem.title}}</span>
                            <ng-container [ngSwitch]="li.type">
                                <span *ngSwitchCase="'selected'">” 选择 “<span class="span-link">{{li.OptionKey.title}}</span>” 时</span>
                                <span *ngSwitchCase="'score'">” 选择 “<span class="span-link">{{li.scoreValueCalc.type+li.scoreValueCalc.value}}</span>” 时</span>
                            </ng-container>
                        </span>
                        <ng-container *ngTemplateOutlet="renderList; context: {item:ques,idx:idx}"></ng-container>
                    </div>
                </ng-container>
            </ng-container>
        </ng-container>
    </ng-template>
    <div *ngFor="let item of formJson.itemList;let i = index">
        <ng-container *ngTemplateOutlet="renderList; context: {item:item,idx:i}"></ng-container>
    </div>
    <div nz-button *ngIf="isEditor" style="margin-top: 20px;margin-bottom: 10px;padding: 4px;" (click)="addListItem()" nz-tooltip [nzTooltipTitle]="l('AddControl')">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
    </div>
</div>
<!-- 添加选择组件 -->
<nz-modal [(nzVisible)]="isShowTypeModal" [nzTitle]="l('Select the type of component to create')" [nzMaskClosable]="true" (nzOnCancel)="isShowTypeModal=false" (nzOnOk)="isShowTypeModal=false">
    <div class="controlButtons">
        <button nz-button nzType="default" (click)="addItem('radio')">{{l('Radio')}}</button>
        <button nz-button nzType="default" (click)="addItem('ckeckBox')">{{l('MultiSelect')}}</button>
        <button nz-button nzType="default" (click)="addItem('input')">{{l('Input')}}</button>
        <button nz-button nzType="default" (click)="addItem('text')">{{l('Textarea')}}</button>
        <button nz-button nzType="default" (click)="addItem('file-doc')">{{l('Doc upload')}}</button>
        <button nz-button nzType="default" (click)="addItem('file-image')">{{l('Image upload')}}</button>
        <button nz-button nzType="default" (click)="addImport('dynamic-import')">{{l('Dynamic Import')}}</button>
        <button nz-button nzType="default" (click)="addGroup()">{{l('Grouping')}}</button>
        <a nz-button nzType="default" nz-popconfirm [nzPopconfirmTitle]="l('AllContentsOfTheCurrentGroupWillBeReplacedDoYouWantToContinue')" [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')" (nzOnConfirm)="addImport('replace-import')">{{l('Replace Import')}}</a>
        <button nz-button nzType="default" (click)="addItem('text-content')">{{l('TextDescription')}}</button>
        <button nz-button nzType="default" (click)="addItem('blank')">{{l('Blank')}}</button>
    </div>
</nz-modal>
<!-- 保存模板 -->
<nz-modal [(nzVisible)]="isVisibleTemplate" [nzTitle]="l('Save as template')" (nzOnCancel)="isVisibleTemplate=false" (nzOnOk)="handleOk()">
    <form nz-form>
        <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>{{l('Headline')}}</nz-form-label>
            <nz-form-control [nzSpan]="20">
                <input nz-input name="title" type="text" [placeholder]="l('HeadlineInputDesc')" [(ngModel)]="entity.name">
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-modal>
<!-- 保存为题目 -->
<!-- <nz-modal [(nzVisible)]="TitleisVisible" [nzTitle]="l('Save as subject')" (nzOnCancel)="TitleisVisible=false" (nzOnOk)="TitleOk()">
    <app-patrol-type-tree #PatrolType [(selectedId)]="ptentity.hdPatrolTypeId" [(selectedVal)]="ptentity.patrolType"></app-patrol-type-tree>
</nz-modal> -->
<ng-template #patroTypeTree>
    <app-patrol-type-tree #PatrolType [(selectedId)]="ptentity.hdPatrolTypeId" [(selectedVal)]="ptentity.patrolType"></app-patrol-type-tree>
</ng-template>
<!-- <nz-modal [(nzVisible)]="importSelectModalIsVisible" [nzTitle]="l('Select Import')" (nzOnCancel)="importSelectModalIsVisible=false" (nzOnOk)="selectImportGroupOnOk()">
    <nz-radio-group *ngIf="importModelSelect" style="margin-bottom: 10px;" [(ngModel)]="importModel">
        <label nz-radio-button nzValue="form">{{l('Form')}}</label>
        <label nz-radio-button nzValue="temp">{{l('Temp')}}</label>
    </nz-radio-group>
    <div nz-row *ngIf="importModel==='form'">
        <div nz-col nzSpan="12">
            <app-patrol-type-tree #patrolTypeTree [(selectedId)]="patrolTypeId"></app-patrol-type-tree>
        </div>
        <div nz-col nzSpan="12" class="select-wrap">
            <app-patrol-form-select [patrolTypeId]="patrolTypeId" [(selectedId)]="importOption.id" [(selectedVal)]="importOption.name"></app-patrol-form-select>
        </div>
    </div>
    <div *ngIf="importModel==='temp'" class="select-wrap">
        <app-patrol-form-temp-select [(selectedId)]="selectTempId"></app-patrol-form-temp-select>
    </div>
</nz-modal> -->
<ng-template #importSelectModal>
    <nz-radio-group *ngIf="importModelSelect" style="margin-bottom: 10px;" [(ngModel)]="importModel">
        <label nz-radio-button nzValue="form">{{l('Form')}}</label>
        <label nz-radio-button nzValue="temp">{{l('Temp')}}</label>
    </nz-radio-group>
    <div nz-row *ngIf="importModel==='form'">
        <div nz-col nzSpan="12">
            <app-patrol-type-tree #patrolTypeTree [(selectedId)]="patrolTypeId"></app-patrol-type-tree>
        </div>
        <div nz-col nzSpan="12" class="select-wrap">
            <app-patrol-form-select [patrolTypeId]="patrolTypeId" [(selectedId)]="importOption.id" [(selectedVal)]="importOption.name"></app-patrol-form-select>
        </div>
    </div>
    <div *ngIf="importModel==='temp'" class="select-wrap">
        <app-patrol-form-temp-select [(selectedId)]="selectTempId"></app-patrol-form-temp-select>
    </div>
</ng-template>
